<template>
  <div>
    <h2 style="margin-left: 38rem">为您推荐以下优化方案</h2>
    <a-card title="方案" :bordered="false" style="width: 100%px">
      <ul>
        <li>停用相对闲置资源</li>
        <li>
          实例：<a-tag color="#108ee9">{{ $global.randomStr(18) }}</a-tag
          >需要添加SSL证书
        </li>
        <li>
          实例：<a-tag color="#108ee9">{{ $global.randomStr(18) }}</a-tag
          >需要进行漏洞修复
        </li>
        <li>
          实例：<a-tag color="#108ee9">{{ $global.randomStr(18) }}</a-tag
          >需要进行降配处理，提高资源利用率
        </li>
      </ul>
      <h3>优化统计</h3>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card>
            <a-statistic
              title="资源利用率"
              :value="11.28"
              :precision="2"
              suffix="%"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <a-icon type="arrow-up" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card>
            <a-statistic
              title="总成本"
              :value="9.3"
              :precision="2"
              suffix="%"
              class="demo-class"
              :value-style="{ color: '#cf1322' }"
            >
              <template #prefix>
                <a-icon type="arrow-down" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
export default {}
</script>

<style scoped></style>
